export default class WxCanvas {
  constructor (ctx, canvasId) {
    this.ctx = ctx
    this.canvasId = canvasId
    this.chart = null

    WxCanvas.initStyle(ctx)
    this.initEvent()
  }

  getContext (contextType) {
    return contextType === '2d' ? this.ctx : null
  }

  setChart (chart) {
    this.chart = chart
  }

  attachEvent () {
    // noop
  }

  detachEvent () {
    // noop
  }

  static initStyle (ctx) {
    const styles = [
      'fillStyle',
      'strokeStyle',
      'globalAlpha',
      'textAlign',
      'textBaseAlign',
      'shadow',
      'lineWidth',
      'lineCap',
      'lineJoin',
      'lineDash',
      'miterLimit',
      'fontSize'
    ]

    styles.forEach(style => {
      Object.defineProperty(ctx, style, {
        set: value => {
          if (
            (style !== 'fillStyle' && style !== 'strokeStyle') ||
            (value !== 'none' && value !== null)
          ) {
            ctx[`set${style.charAt(0).toUpperCase()}${style.slice(1)}`](value)
          }
        }
      })
    })

    ctx.createRadialGradient = () => ctx.createCircularGradient(arguments)
  }

  initEvent () {
    this.event = {}
    const eventNames = [
      {
        wxName: 'touchStart',
        ecName: 'mousedown'
      },
      {
        wxName: 'touchMove',
        ecName: 'mousemove'
      },
      {
        wxName: 'touchEnd',
        ecName: 'mouseup'
      },
      {
        wxName: 'touchEnd',
        ecName: 'click'
      }
    ]

    eventNames.forEach(name => {
      this.event[name.wxName] = e => {
        const touch = e.mp.touches[0]
        this.chart._zr.handler.dispatch(name.ecName, {
          zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
          zrY: name.wxName === 'tap' ? touch.clientY : touch.y
        })
      }
    })
  }
}
